<template>
  <el-row>
    <el-col :span="12">
      <el-input placeholder="输入关键字进行过滤" />
      <el-tree
        ref="categoryTree"
        node-key="id"
        lazy
        :default-expanded-keys="categoryTreeExpandedKeys"
        :load="loadCategoryTreeData"
        :props="categoryProps"
        :highlight-current="true"
        :expand-on-click-node="false"
      >
        <span slot-scope="{ node, nodeData }" class="custom-tree-node">
          <span>{{ node.label }}</span>
          <span>
            <el-button type="text" size="mini" @click="() => openAddTreeNodeDialog(node, nodeData)">
              添加
            </el-button>
            <el-button type="text" size="mini" @click="() => openEditTreeNodeDialog(node, nodeData)">
              编辑
            </el-button>
            <el-button type="text" size="mini" @click="() => handleRemoveTreeNode(node, nodeData)">
              删除
            </el-button>
          </span>
        </span>
      </el-tree>
    </el-col>
    <el-col :span="12">
      <span />
    </el-col>
    <el-dialog title="商品分类节点" :visible.sync="categoryFormVisible">
      <el-form ref="categoryForm" v-loading="categoryFormLoading" :model="categoryForm" :rules="categoryRules">
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="categoryForm.categoryParentId" type="hidden" />
          <el-input v-model="categoryForm.categoryName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="节点类型" :label-width="formLabelWidth">
          <el-select v-model="categoryForm.leaf" placeholder="请选择节点类型">
            <el-option label="目录节点" value="0" />
            <el-option label="叶子节点" value="1" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="categoryFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddTreeNode()">确 定</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>
<script>
import { validCategoryName } from '@/utils/validate'
import { listCategoriesByParentId, saveCategoryTreeNode } from '@/api/category'

export default {
  data() {
    const validateCategoryName = (rule, value, callback) => {
      if (!validCategoryName(value)) {
        callback(new Error('请输入商品分类名称'))
      } else {
        callback()
      }
    }

    return {
      /**
       * 默认展开的节点
       */
      categoryTreeExpandedKeys: [],
      categoryProps: {
        label: 'categoryName'
      },
      categoryFormVisible: false,
      formLabelWidth: '120px',
      categoryForm: {
        categoryParentId: '',
        categoryName: '',
        leaf: ''
      },
      categoryRules: {
        categoryName: [{ required: true, trigger: 'blue', validator: validateCategoryName }]
      },
      categoryFormLoading: false
    }
  },
  created() {
  },
  methods: {
    /**
     * 加载商品分类树数据
     */
    loadCategoryTreeData(node, resolve) {
      if (node.level === 0) {
        listCategoriesByParentId()
          .then((res) => {
            return resolve(res)
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        listCategoriesByParentId(node.data.id)
          .then((res) => {
            if (res) {
              return resolve(res)
            } else {
              return resolve([])
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },

    /**
     * 打开添加商品分类树对话框
     */
    openAddTreeNodeDialog(node, data) {
      this.categoryForm.categoryParentId = node.data.id
      this.categoryFormVisible = true
    },

    /**
     * 打开编辑商品分类树对话框
     */
    openEditTreeNodeDialog(node) {
      this.categoryForm.categoryParentId = node.data.id
      this.categoryForm.categoryName = node.data.categoryName
      this.categoryForm.leaf = node.data.leaf
      this.categoryFormVisible = true
    },

    /**
     * 处理添加商品分类树节点
     */
    handleAddTreeNode() {
      this.$refs.categoryForm.validate(valid => {
        if (valid) {
          this.categoryFormLoading = true

          const categoryTreeNode = {
            categoryName: this.categoryForm.categoryName,
            leaf: this.categoryForm.leaf,
            parentCategoryDTO: {
              id: this.categoryForm.categoryParentId
            }
          }
          saveCategoryTreeNode(categoryTreeNode)
            .then(res => {
              this.resetCategoryForm()
              this.categoryFormVisible = false
            })
            .catch(err => {
              console.log(err)
            })
            .then(res => {
              this.categoryFormLoading = false
            })
        }
      })
    },

    /**
     * 重置商品分类表单
     */
    resetCategoryForm() {
      this.categoryForm.categoryName = ''
      this.categoryForm.leaf = ''
    },

    /**
     * 处理删除商品分类树节点
     */
    handleRemoveTreeNode(node, data) {
    }
  }
}
</script>
<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
